import React, { useState, useEffect ,useContext} from 'react';
import { Button, Table, Modal, Form, Input, Space, Switch, message, Image, InputNumber } from 'antd';
const { Column, ColumnGroup } = Table;
import createContext from '../../../../utils/gyqContext'
import { getGoodsById,setOrderBySku } from '../../../../api/OrderApi'
interface PropsType {
    isSelectOpen: boolean;
    close(): void;
    goodsId: number | undefined;
    orderId: number | undefined;
    goodsInfo: any
}


interface DataType {
    key: React.Key;
    skuId: number;//序号
    type: string;//商品类型
    skuMsg: string;//尺码
    barCode: string;//条形码
    skuPrice: number;//价格
    skuMarketValue: number;//市场价
    skuStock: number;//商品库存
    skuImag: string;//商品图片
    itemNum: number;//选购数量
}

function OrderselectGoods(props: PropsType) {
    // const [isOpen, setIsOpen] = useState<boolean>(false);
    const [data, setData] = useState<DataType[]>([])
    const [num, setNum] = useState<number>(1)
    const context = useContext<any>(createContext)
    // const [select,setSelect]=useState<string>('取消选择')

    console.log('props--selsect', props);


    const handleOk = () => {
        // setIsModalOpen(false);
        props.close()
        message.success('选择商品类型成功')
    };

    const cancleHandle = () => {
        // setIsModalOpen(false);
        props.close()
        message.success('取消选择')
    };

    useEffect(() => {

        setData(props.goodsInfo);
    }, [props.goodsInfo])

    //  取消选择商品
    const clicklSelect = (skuId: number) => {
        console.log('点击了选择', num);
        setOrderBySku({
            itemNum:num,
            skuId:skuId,
            orderId:props.orderId,
        }).then(res=>{
            console.log('res',res);
            message.success('选择成功')
            // context.getOrder()
        }).catch(err=>{
            console.log('err9999999',err);

        })
    }


    // 改变数量
    const onChange = (num: any) => {
        console.log('gbl', num);
        setNum(num)
    }


    return (
        <>
            <Modal title="选择商品" open={props.isSelectOpen} onOk={handleOk} onCancel={cancleHandle} width={1000} forceRender>
                {/* 该商品的所有类型选择 */}
                <Table dataSource={data} bordered pagination={false} rowKey={item => item.skuId}>
                    <Column title="序号" dataIndex="skuId" key="skuId" />
                    <Column title="商品类型" dataIndex="type" key="type" />
                    <Column title="尺码" dataIndex="skuMsg" key="skuMsg" />
                    <Column title="条形码" dataIndex="skuBarCode" key="skuBarCode" />
                    <Column title="价格" dataIndex="skuPrice" key="skuPrice" />
                    <Column title="市场价" dataIndex="skuMarketValue" key="skuMarketValue" />
                    <Column title="商品库存" dataIndex="skuStock" key="skuStock" />
                    <Column title="商品图片" dataIndex="skuImag" key="skuImag"
                        render={(_: any, record: DataType) => (
                            <Image
                                width={100}
                                height={50}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
                            </Image>
                        )}
                    />
                    <Column title="选购数量" dataIndex="itemNum" key="itemNum"
                        render={(_: any, record: DataType) => (
                            <InputNumber min={1} max={10} defaultValue={record.itemNum} onChange={onChange} />
                        )}
                    />
                    <Column
                        title="操作"
                        key="action"
                        render={(_: any, record: DataType) => (
                            <Space size="middle">
                                {
                                    <Button type='link' onClick={() => clicklSelect(record.skuId)}> {record.skuId == 1 ? '取消选中' : '选择此商品'} </Button>
                                }
                            </Space>
                        )}
                    />
                </Table>

            </Modal>
        </>
    );
};

export default OrderselectGoods;